import React from 'react'
import { insert } from './store'

import { useAppDispatch, useAppSelector } from './hook'

export default function List() {
  const dispatch = useAppDispatch()
  const data = useAppSelector((state) => {
    return state.list.lis
  })
  return (
    <>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key !== 'Enter') return
          const value = (e.target as HTMLInputElement).value.trim()
          dispatch(insert(value))
        }}
      />
      <ul>
        {data.map((item: string, index: number) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </>
  )
}
